<template>
<el-form label-width="100px" >
  <el-form-item label="SPU 名称"> SPU 名称 </el-form-item>
  <el-form-item label="SPU名称">
    <el-input ></el-input>
  </el-form-item>
  <el-form-item label="价格（元）">
    <el-input  placeholder="" size="normal" type="number" ></el-input>
  </el-form-item>
  <el-form-item label="重量（千克）">
    <el-input placeholder="" size="normal" type="number" ></el-input>
  </el-form-item>
  <el-form-item label="规格描述">
    <el-input  placeholder="" size="normal" type="textarea"  rows="4"></el-input>
  </el-form-item>
  <el-form-item label="平台属性" inline="true">
    <el-form-item label="手机系统" size="normal">
        <el-select   placeholder="请选择" >
        <el-option></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="手机系统" size="normal">
        <el-select   placeholder="请选择" >
        <el-option></el-option>
      </el-select>
    </el-form-item>

  </el-form-item>
  
  <el-form-item label="销售属性" >
    <el-form-item label="颜色" size="normal">
        <el-select   placeholder="请选择" >
        <el-option></el-option>
      </el-select>
    </el-form-item>
  </el-form-item>

  <el-form-item label="图片列表" >
    <el-table border stripe>
        <el-table-column type="selection" width="55" />
        <el-table-column label="图片"></el-table-column>
        <el-table-column label="名称"></el-table-column>
        <el-table-column label="操作">
          <template v-slot>
            <el-button type="primary">设为默认</el-button>
          </template>
        </el-table-column>
      </el-table>
  </el-form-item>

  <el-form-item label="" size="normal">
    <el-button type="primary">保存</el-button>
      <el-button type="default" @click="$emit('setState', 0)">取消</el-button>
  </el-form-item>
  
</el-form>
</template>

<script lang="ts">
import { defineComponent} from "vue";
export default defineComponent({
  name: "SkuForm",
});
</script>

<script setup lang="ts">
import { requestBaseSaleAttrList, requestSpuImgList, type SpuInfoType } from "@/api/spu";
import {onMounted} from "vue";
import useAttrStore from "@/stores/attr";
import {storeToRefs} from "pinia"
import { requestAttrList } from "@/api/attr";
  //接受传过来的值
  const props= defineProps<{
    spuInfo:SpuInfoType
  }>()
  //拿到三级分类的id数据
  const attrStore = useAttrStore();
  const { category1Id, category2Id, category3Id } = storeToRefs(attrStore);

  const spuInfo = props.spuInfo;
  const getInitData = async () => {
  const promise1 = requestAttrList(
    category1Id.value as number,
    category2Id.value as number,
    category3Id.value as number
  );
  const promise2 = requestBaseSaleAttrList();
  const promise3 = requestSpuImgList(spuInfo.id as number);

  const result = await Promise.all([promise1, promise2, promise3]);
};
onMounted(() => {
  getInitData()
})
</script>
